{extend name="other/public"}
{block name='css'}
<style>
    .layui-elem-quote{background: #f6f6f6;padding: 0;}
    .c1{font-size: 14px;}
    .c2{padding-top: 5px;padding-left: 0px;line-height: 24px;}
    .c3{justify-content: space-between;}
    .c4 input{border:1px solid #ccc;text-align: center;width: 42px;line-height: 20px;margin-left: 5px;border-radius: 3px;color: #666;}
    .c5{justify-content: space-between;border-bottom:1px solid #f6f6f6;padding:5px 10px;}
    .c5:hover{background: #e1e1e1;}
    .c6{color: #666;}
    .c6 span{display: inline-block;margin-left: 10px;}
    .c8{justify-content: space-between;margin-bottom: 10px;}
    span.c10{color: #FF5722;margin-left: 0;}
    .layui-btn span{display: inline-block;width: 20px;}
</style>
{/block}

{block name='content'}
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card layui-form" action="" lay-filter="anForm">
                <div class="layui-card-body">
                    <div class="c7">
                        <blockquote class="layui-elem-quote" v-for="(v,index) in list" key="index">
                            <list :val="v" str=""></list>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
</div>
{/block}

{block name='js'}
<script>
    const listData = {$listData|raw};

    Vue.component("list",{
        name:'listData',
        props:{
            val:Object,
            str:String
        },
        methods: {
            goPage(v){
                console.log(v)
                window.open("http://tp6/web/"+v.url)
            }
        },
        template:`
            <div>
                <div class="c5 u-flex">
                    <div>{{str}}{{val.cn_name}}</div>
                    <div class="c4 u-flex">
    
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled">
                                <span>{{val.sort}}</span>
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                                <a :href="'{:url('form_data')}?id='+val.id">编辑栏目</a>  
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" @click="goPage(val)">
                                查看页面
                            </button>
            
                    </div>
                </div>
                <div  v-for="(v,index) in val.arr" key="index" v-if="val.arr.length > 0">
                    <list :val="v" :str="'|—— '+str"></list>
                </div>
            </div>
        `
    })

    new Vue({
        el:"#app",
        data:{
            list:[],
            divStr:''
        },
        mounted() {
            var _this = this;
            _this.list = this.deeploop(0)
            
            // $(".layui-card-body .c7").html(_this.dg(_this.list,0))
        },
        methods: {
            /**
             *   根据 id 查询到数据并将数据存储到数组 返回
             */
            findById (id) {
                let child = [];
                listData.forEach((value) => {
                    if (value.pid == id) {
                        child.push(value);
                    }
                });
                return child;
            },

            /**
             *   递归查询  到数据并将数据存储到数组 返回
             */
            deeploop (id) {
                let dataArr = this.findById(id);
                console.log(dataArr)
                if (dataArr.length <= 0) {
                    return null;
                } else {
                    dataArr.forEach((value) => {
                        if (this.deeploop(value.id) != null) {
                            value["arr"] = this.deeploop(value.id);
                        }
                    });
                }
                return dataArr;
            },

            // dg(arr,pid,str=''){
            //     var _this = this;
            //     arr.forEach(v=>{
            //         if(Number(pid) == 0 && Number(v.pid) == Number(pid)){
            //             _this.divStr += `<blockquote class="layui-elem-quote">`
            //         }
            //         if(Number(v.pid) == Number(pid)){
            //             _this.divStr+=`<div class="c2">
            //                 <div class="c5 u-flex">
            //                     <div class="c6">`
            //                         _this.divStr += Number(pid) != 0?str:''
            //                         _this.divStr += v.cn_name
            //                     _this.divStr += `</div>
            //                     <div class="c4 u-flex">
            //                         <div class="layui-btn-group" data-url="`+ v.url+`" data-id="`+ v.id+`" data-title="`+ v.cn_name+`" >
            //                             <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
            //                                 <a href="{:url('form_data')}?id=`+v.id+`">编辑栏目</a>   
            //                             </button>
            //                             <button type="button" onclick="actionFun(1,event)" class="layui-btn layui-btn-sm layui-btn-primary">
            //                                 预览栏目
            //                             </button>
            //                         </div>
            //                     </div>
            //                 </div>`
            //             _this.dg(arr,v.id,'|——'+str)
            //             _this.divStr += `</div>`
            //         }
            //         if(Number(pid) == 0 && Number(v.pid) == Number(pid)){
            //             _this.divStr += `</blockquote>`
            //         }
            //     })
            //     return _this.divStr;
            // }
        },
    })

    layui.config({
        base: '../../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','admin','form'],function(){
        var admin = layui.admin;
        var form = layui.form;
        admin.on('hash(xxx)', function(router){
            console.log(router); //得到路由信息
        });

    });


function actionFun(type,e){
    console.log(e.path[1].dataset.url)
    console.log(e.path[1].dataset.id)
    if(type == 1){
        if(e.path[1].dataset.url!=''){
            var url = window.location.protocol+'//'+window.location.host +'/web/'+ e.path[1].dataset.url;
            console.log(url)
            parent.layui.index.openTabsPage(url, e.path[1].dataset.title);
        }else{
            layer.msg('未填写链接')
        }
    }
}

  </script>
{/block}